<!--
 * @Author: chenhuanhuan 2925102113@qq.com
 * @Date: 2024-09-19 20:13:13
 * @LastEditors: chenhuanhuan 2925102113@qq.com
 * @LastEditTime: 2024-09-20 09:55:20
 * @FilePath: \orderApp\packageTwo\pages\myReservations\components\calendarsPop.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <view class="">
    <uv-popup ref="popup" :close-on-click-overlay="false" round="12">
      <view class="content">
        <view class="flex flex-justify-between btnBox">
          <text @click="close">取消</text>
          <text class="color-#006241" @click="confirm">确定</text>
        </view>
        <uv-calendars
          ref="calendars"
          mode="range"
          :clearDate="false"
          :insert="true"
          @change="change"
          :endDate="endDate"
          :date="curDate"
        />
      </view>
    </uv-popup>
  </view>
</template>

<script lang="ts" setup>
import { getWeekDate, getAnyWeek } from "@/utils/time";

import dayjs from "dayjs";
import "dayjs/locale/zh-cn";
dayjs.locale("zh-cn");

const props = defineProps({
  endDate: {
    type: String,
  },
  defaultDate: {
    type: Array,
  },
});

const emits = defineEmits(['changeTime'])

const curDate = ref([])
const curWeek = ref([])
const confirm = () => {
  emits('changeTime',curWeek.value)
  close()
};
const change = (e) => {
  let date = dayjs(e.fulldate);
  curWeek.value = getAnyWeek(date);
  curDate.value = [curWeek.value[0],curWeek.value[6]]
};

const popup = ref(null);
const open = () => {
  popup.value.open("bottom");
  curDate.value = props.defaultDate;
};

const close = ()=>{
  popup.value.close()
}

defineExpose({ open });
</script>

<style lang="scss" scoped>
//
.content{
  // height:50vh ;
}

.btnBox{
  width: 100%;
  height: 85rpx;
  padding: 0 20rpx;
  align-items: center;
  box-sizing: border-box;
  font-size: 31rpx;
}
</style>
